<template>
  <div style="position: relative">
    <vue-draggable-resizable
      style="width: 100%;height: 500px"
      :x="0"
      :y="0"
      :resizable="false"
      @dragging="onDrag"
    >
      <div ref="sangjiBox" id="sangjiBox" :style="{width: echartBoxW,height: echartBoxH}" @wheel.prevent="handleTableWheel($event)">
      </div>
      <div class="light" v-for="(item,index) in iconXY" :key="index" :style="{top: item.y+'px',left: (item.x+5)+'px',backgroundColor: item.color}"></div>
    </vue-draggable-resizable>
    <div style="position: relative;z-index: 101;">
      <button @click="bigger(1)">点击放大</button>
      <button @click="bigger(-1)">点击缩小</button>
    </div>
    <div class="dialog" v-show="showDialog" :style="{top: top+'px',left: left+'px'}">
      ceshiceshi
    </div>
  </div>


</template>

<script>
  import energyData from '@/assets/energy1'
  import VueDraggableResizable from 'vue-draggable-resizable'
  export default {
    name: "sangjitu",
    data() {
      return {
        showDialog: false,
        echartBoxW: '100%',
        echartBoxH: '500px',
        defaultEchartBoxW: '',
        defaultEchartBoxH: '',
        top: 0,
        left: 0,
        links: [],
        myChart: '',
        nodeXY: [],
        nodes: [],
        scaleNum: 1,
        dragX: 0,
        dragY: 0,
        iconXY:[]
      }
    },
    components:{
      VueDraggableResizable
    },
    mounted() {
      this.links = energyData.links1
      this.nodes = energyData.nodes
      this.drawEchart()
      this.intervalFn()
      this.defaultEchartBoxW = this.$refs.sangjiBox.offsetWidth
      this.defaultEchartBoxH = this.$refs.sangjiBox.offsetHeight
    },
    methods: {
      drawEchart () {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts5.init(document.getElementById('sangjiBox'))
        let option = {
          title: {
            text: 'Node Align Left'
          },
          tooltip: {
            trigger: 'item'
          },
          animation: true,
          series: [
            {
              left:0,
              top:0,
              type: 'sankey',
              draggable: false,
              // emphasis: {
              //   focus: 'adjacency'
              // },
              nodeAlign: 'right',
              data: this.nodes,
              links: this.links,
              lineStyle: {
                color: 'source',
                curveness: 0.5,
                // opacity: 0.6
              }
            }
          ]
        }
        this.nodeClick()// 绑定点击事件
        this.myChart.setOption(option,true);
        let xyArr = this.myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts
        this.getXY(xyArr)// 获取节点的xy坐标
      },
      nodeClick() {
        this.myChart.off('click')
        let _this = this
        this.myChart.on('click', function (params) {
          if(params.dataType == 'node'||params.dataType == 'edge') {
            _this.showDialog = true
            _this.left = params.event.offsetX + _this.dragX
            _this.top = params.event.offsetY + _this.dragY
          }else {
            _this.showDialog = false
          }
        });
      },
      getXY(data) {
        this.nodeXY = []
        this.iconXY=[]
        this.nodes.forEach((item,index) => {
          if(item.warning) {
            this.nodeXY.push({
              x: data[index].x + 90*this.scaleNum + this.dragX,
              y: data[index].y + 30*this.scaleNum + this.dragY
            })
            this.iconXY.push({
              x: data[index].x,
              y: data[index].y
            })
          }
        })
      },
      intervalFn() {
        this.links.forEach(item => {
          let aa = Math.random()*30;
          item.value = aa
        })
      },
      handleTableWheel(event) {
        let obj = this.$refs.sangjiBox;
        return this.tableZoom(obj, event);
      },
      tableZoom(obj, event) {
        // 一开始默认是100%
        let type = event.wheelDelta / 12>0?1:-1
        this.bigger(type)
      },
      bigger(type) {
        type == 1?this.scaleNum += 0.1:this.scaleNum -= 0.1
        this.echartBoxW = this.scaleNum*this.defaultEchartBoxW + 'px'
        this.echartBoxH = this.scaleNum*this.defaultEchartBoxH + 'px'
        this.$nextTick(() => {
          this.myChart.resize()
          console.log('......',this.myChart.getModel().getSeriesByIndex(0).getData())
          let xyArr = this.myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts
          this.getXY(xyArr)// 获取节点的xy坐标
        })
      },
      onDrag(x,y) {
        console.log(x,y)
        this.dragX = x
        this.dragY = y
        let xyArr = this.myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts
        this.getXY(xyArr)// 获取节点的xy坐标
      }
    }
  }
</script>
<style>
  .container{
    overflow: scroll;
  }
  .vdr{
    border: none!important;
  }
</style>
<style scoped>
  .dialog{
    width: 200px;
    border: 1px solid #ccc;
    height: 100px;
    position: absolute;
    background-color: #fff;
  }
  .light{
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 10;
    animation: twinkle 1s infinite alternate;
  }
  @keyframes twinkle {
    0%{
      opacity:.0.8;
    }
    100%{
      opacity:0;
    }
  }
</style>
